<!--
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Sophisticated Service · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }



        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex!important;
            flex-wrap: nowrap!important;
            justify-content: space-between!important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            &#45;&#45;blue: #007bff;
            &#45;&#45;indigo: #6610f2;
            &#45;&#45;purple: #6f42c1;
            &#45;&#45;pink: #e83e8c;
            &#45;&#45;red: #dc3545;
            &#45;&#45;orange: #fd7e14;
            &#45;&#45;yellow: #ffc107;
            &#45;&#45;green: #28a745;
            &#45;&#45;teal: #20c997;
            &#45;&#45;cyan: #17a2b8;
            &#45;&#45;white: #fff;
            &#45;&#45;gray: #6c757d;
            &#45;&#45;gray-dark: #343a40;
            &#45;&#45;primary: #000;
            &#45;&#45;secondary: #6c757d;
            &#45;&#45;success: #28a745;
            &#45;&#45;info: #17a2b8;
            &#45;&#45;warning: #ffc107;
            &#45;&#45;danger: #dc3545;
            &#45;&#45;light: #f8f9fa;
            &#45;&#45;dark: #343a40;
            &#45;&#45;breakpoint-xs: 0;
            &#45;&#45;breakpoint-sm: 576px;
            &#45;&#45;breakpoint-md: 768px;
            &#45;&#45;breakpoint-lg: 992px;
            &#45;&#45;breakpoint-xl: 1200px;
            &#45;&#45;font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            &#45;&#45;font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }



        /*上面是footer*/

        /*上面是header*/

        .left-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        .left-list_item {
            font-weight: bolder;
            font-size: 18px;
            padding-top: 20px;
        }

        .row {
            width: 100%;
        }

        .col1 {
            vertical-align: top;
            display: inline-block;
            padding: 0 110px 0 0;
        }

        .col2 {
            display: inline-block;
            padding: 10px 0;
        }

        .picture-frame {
            padding-right: 150px;
            background-image: url("../static/home.7697b52f.png");
            width: 1300px;
            height: 300px;
            margin-bottom: 50px;
        }

        .part1 {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 20px;
            margin: 0;
            padding: 0;
        }

        .part_title {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            line-height: 80px;
            font-size: 24px;
            font-weight: 400;
            color: #2f353d;
            border-bottom: 1px solid #eee;
        }

        .part1_item {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 20px;
            padding: 0;
        }


        .input-groups li div {
            display: inline-block;
        }

        .input-groups {
            list-style: none;
            padding: 0;
        }

        .part1_item ul li {
            font: 16px/1.5 tahoma, arial, "\5b8b\4f53";
            font-family: tahoma, arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
            list-style: none;
            outline: 0;
            text-decoration: none;
            padding: 0 12px;
            margin-right: 20px;
            font-weight: 700;
            height: 100%;
            line-height: 46px;

            border: 1px solid #cfbfb1;
            width: 75px;
            display: inline-block;
        }

        .part1_item ul li a {
            margin: 0 20px;
            color: gray;
        }

        .part1_item ul {
            list-style: none;
            display: inline-block;
            padding-left: 0;
        }

        .input-title {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            display: inline-block;
            font-size: 20px;
            color: #5b5b5b;
            line-height: 58px;
            width: 120px;
        }

        .bar-right {
            height: 58px;
            width: 1000px;
            float: right;
        }

        .bar-right div select {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            text-transform: none;
            font-family: inherit;
            width: 11rem;
            border: 1px solid #d8dde1;
            height: 56px;
            line-height: 56px;
            padding-left: 10px;
            font-size: 15px;
            color: #576371;
            margin-right: 20px;
        }

        .input-item {
            margin: 20px 0;
        }

        .item-two input {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 653px;
            padding-left: 20px;
            overflow-y: hidden;
        }

        .item-two {
            margin-top: 20px;
            margin-left: 0;
        }

        .address {
        }

        .name {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .input-address {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 600px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .input-content {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 400px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .input-petType {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .store {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .phone {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 400px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .notice {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            font-size: 12px;
            margin: 0;
            padding: 30px;
            background: #f5f8fa;
            margin-bottom: 30px;
            height: 150px;
            box-sizing: border-box;
        }

        .notice-list {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .notice_tit {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            float: left;
            height: 100%;
            color: #0190e1;
            font-weight: 700;
            font-size: 18px;
            margin-right: 20px;
        }

        .notice ul {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            font-size: 16px;
            list-style: none;
        }

        .submit-btn {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            cursor: pointer;
            transition: color .2s ease;
            text-decoration: none;
            border: 0 none;
            outline: 0 none;
            display: inline-block;
            line-height: 40px;
            width: 124px;
            height: 40px;
            text-align: center;
            color: #fff;
            font-size: 15px;
            background: #0190e1;
        }

        .back-btn {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            cursor: pointer;
            transition: color .2s ease;
            text-decoration: none;
            border: 0 none;
            outline: 0 none;
            background: #a4a4a4;
            margin-right: 15px;
            display: inline-block;
            line-height: 40px;
            width: 124px;
            height: 40px;
            text-align: center;
            color: #fff;
            font-size: 15px;
        }

        .question-btns {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 12px;
            margin: 0;
            padding: 0;
            background: #fbfbfb;
            height: 96px;
            line-height: 96px;
            text-align: center;
        }

        .time {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .details {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 600px;
            overflow-y: hidden;
            padding-left: 20px;
        }


    </style>
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">登录</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="row">
        <div class="col1">
            <ul class="left-list">
                <li class="left-list_item"><a href="/cat">猫专区</a></li>
                <li class="left-list_item"><a href="/dog">狗专区</a></li>
                <li class="left-list_item"><a>SPECIAL合作专区</a></li>
            </ul>
        </div>
        <div class="col2">
            <div class="part0">
                <div class="picture-frame"></div>
            </div>
            <form action="/appointing" method="post">
            <div class="part1">
                <div class="part_title">
                    <div>请选择预约类别</div>
                </div>
                <div class="part1_item">
                    <span>宠物类型：</span>
                    <label>
                    <input class="input-petType" type="text" placeholder="宠物类型" name="petType" style="margin-top: 50px;margin-bottom: 50px">
                     </label>
                    &lt;!&ndash;<ul>
                        <li><a>猫</a></li>
                        <li><a>狗</a></li>
                    </ul>&ndash;&gt;
                </div>
                <div class="part1_item">
                    <span>服务内容：</span>
                    <label>
                        <input class="input-content" type="text" placeholder="服务内容" name="contentType">
                    </label>
                    &lt;!&ndash;<ul>
                        <li><a>铲屎</a></li>
                        <li><a>加饭</a></li>
                        <li><a>洗澡</a></li>
                    </ul>&ndash;&gt;
                </div>
            </div>
            <div class="part2" style="">
                <div class="part_title">请填写个人信息</div>
                <ul class="input-groups">
                    <li>
                        <div class="input-item">
                            <div class="address">
                                <div class="input-title">*个人地址：</div>
                                <div class="bar-right fl">
                                    <label>
                                        <input class="input-address" type="text" placeholder="地址" name="address">
                                    </label>
                                    &lt;!&ndash;<div><select name="" style="margin-right: 20px;">
                                        <option disabled="disabled" value="default">请选择省</option>
                                        <option value="1000001">安徽省</option>
                                        <option value="1000002">北京市</option>
                                        <option value="1000003">福建省</option>
                                        <option value="1000004">甘肃省</option>
                                        <option value="1000005">广东省</option>
                                        <option value="1000006">广西壮族自治区</option>
                                        <option value="1000007">贵州省</option>
                                        <option value="1000008">海南省</option>
                                        <option value="1000009">河北省</option>
                                        <option value="1000010">河南省</option>
                                        <option value="1000011">黑龙江省</option>
                                        <option value="1000012">湖北省</option>
                                        <option value="1000013">湖南省</option>
                                        <option value="1000014">吉林省</option>
                                        <option value="1000015">江苏省</option>
                                        <option value="1000016">江西省</option>
                                        <option value="1000017">辽宁省</option>
                                        <option value="1000018">内蒙古自治区</option>
                                        <option value="1000019">宁夏回族自治区</option>
                                        <option value="1000032">其它</option>
                                        <option value="1000020">青海省</option>
                                        <option value="1000021">山东省</option>
                                        <option value="1000022">山西省</option>
                                        <option value="1000023">陕西省</option>
                                        <option value="1000024">上海市</option>
                                        <option value="1000025">四川省</option>
                                        <option value="1000026">天津市</option>
                                        <option value="1000027">西藏自治区</option>
                                        <option value="1000028">新疆维吾尔自治区</option>
                                        <option value="1000029">云南省</option>
                                        <option value="1000030">浙江省</option>
                                        <option value="1000031">重庆市</option>
                                    </select>
                                        <select name="" style="margin-right: 20px;">
                                            <option disabled="disabled" value="default">请选择市</option>
                                        </select><select name=""
                                                         style="margin-right: 20px;">
                                            <option disabled="disabled" value="default">请选择区</option>
                                        </select><select name="">
                                            <option disabled="disabled" value="default">请选择乡镇</option>
                                        </select>
                                    </div>
                                    <div class="item-two"><input type="text" placeholder="详细地址"
                                                                 regtype="ifVal"
                                                                 class="detail-addr"></div>&ndash;&gt;
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="input-item">
                            <div class="input-title">*&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;店：</div>
                            <div class="bar-right fl">
                                <div>
                                    <label>
                                        <input class="store" type="text" placeholder="门店" name="store">
                                    </label>
                                    &lt;!&ndash;<select name="" style="margin-right: 20px;">
                                    <option disabled="disabled" value="default">请选择门店</option>
                                </select>&ndash;&gt;
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="input-item">
                            <div class="input-title">*您的姓名：</div>
                            <div class="bar-right fl">
                                <div><label>
                                    <input class="name" type="text" name="name">
                                </label></div>
                            </div>
                        </div>
                    </li>
                    &lt;!&ndash;                    <li>
                                            <div class="input-item">
                                                <div class="input-title">*手机：</div>
                                                <div class="address-right fl">
                                                    <div><label>
                                                        <input class="phone" type="text">
                                                    </label></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="input-item">
                                                <div class="input-title">*个人地址：</div>
                                                <div class="address-right fl">
                                                    <div><select name="" style="margin-right: 20px;">
                                                        <option disabled="disabled" value="default">请选择省</option>
                                                        <option value="1000001">安徽省</option>
                                                        <option value="1000002">北京市</option>
                                                        <option value="1000003">福建省</option>
                                                        <option value="1000004">甘肃省</option>
                                                        <option value="1000005">广东省</option>
                                                        <option value="1000006">广西壮族自治区</option>
                                                        <option value="1000007">贵州省</option>
                                                        <option value="1000008">海南省</option>
                                                        <option value="1000009">河北省</option>
                                                        <option value="1000010">河南省</option>
                                                        <option value="1000011">黑龙江省</option>
                                                        <option value="1000012">湖北省</option>
                                                        <option value="1000013">湖南省</option>
                                                        <option value="1000014">吉林省</option>
                                                        <option value="1000015">江苏省</option>
                                                        <option value="1000016">江西省</option>
                                                        <option value="1000017">辽宁省</option>
                                                        <option value="1000018">内蒙古自治区</option>
                                                        <option value="1000019">宁夏回族自治区</option>
                                                        <option value="1000032">其它</option>
                                                        <option value="1000020">青海省</option>
                                                        <option value="1000021">山东省</option>
                                                        <option value="1000022">山西省</option>
                                                        <option value="1000023">陕西省</option>
                                                        <option value="1000024">上海市</option>
                                                        <option value="1000025">四川省</option>
                                                        <option value="1000026">天津市</option>
                                                        <option value="1000027">西藏自治区</option>
                                                        <option value="1000028">新疆维吾尔自治区</option>
                                                        <option value="1000029">云南省</option>
                                                        <option value="1000030">浙江省</option>
                                                        <option value="1000031">重庆市</option>
                                                    </select><select name="" style="margin-right: 20px;">
                                                        <option disabled="disabled" value="default">请选择市</option>
                                                    </select><select name="" style="margin-right: 20px;">
                                                        <option disabled="disabled" value="default">请选择区</option>
                                                    </select><select name="">
                                                        <option disabled="disabled" value="default">请选择乡镇</option>
                                                    </select></div>
                                                    <div class="item-two" style="margin-left: 20px;"><input type="text" placeholder="详细地址"
                                                                                                            regtype="ifVal"
                                                                                                            class="detail-addr"></div>
                                                </div>
                                            </div>
                                        </li>&ndash;&gt;
                </ul>
                <div class="reservation-info">
                    <div class="part_title">请填写预约信息</div>
                    <ul class="input-groups">
                        <li>
                            <div class="input-item">
                                <div class="input-title">*上门时间：</div>
                                <div class="bar-right fl">
                                    <div><label>
                                        <input class="time" type="date" name="date">
                                    </label></div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="input-item">
                                <div class="input-title">*服务要求：</div>
                                <div class="bar-right fl">
                                    <div><label>
                                        <input class="details" type="text" name="demand">
                                    </label>

                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>

                    <div class="notice">
                        <div class="notice_tit fl">注意事项</div>
                        <div class="notice-list">
                            <ul>
                                <li>
                                    ● 您的预约登记成功后，门店会及时处理您的预约单，并与您联系以确认上门时间，请确保您提供的电话保持畅通。
                                </li>
                                <li>
                                    ● 由于需要事先安排，目前门店只接受14天内的服务预约。
                                </li>
                                <li>
                                    ● 如您需要更改信息或期望上门日期，请提前联系上面显示的门店电话号码。
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question-btns"><a href="javascript:" class="back-btn">重置</a>
                <label>
                <input class="submit-btn" type="submit">
            </label>
            </div>
            </form>
        </div>
    </div>


</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>
</html>-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Sophisticated Service · Soro</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }



        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;
        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex!important;
            flex-wrap: nowrap!important;
            justify-content: space-between!important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }



        /*上面是footer*/

        /*上面是header*/

        .left-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }

        .left-list_item {
            font-weight: bolder;
            font-size: 18px;
            padding-top: 20px;
        }

        .row {
            width: 100%;
        }

        .col1 {
            vertical-align: top;
            display: inline-block;
            padding: 0 110px 0 0;
        }

        .col2 {
            display: inline-block;
            padding: 10px 0;
        }

        .picture-frame {
            padding-right: 150px;
            background-image: url("../static/home.7697b52f.png");
            width: 1300px;
            height: 300px;
            margin-bottom: 50px;
        }

        .part1 {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 20px;
            margin: 0;
            padding: 0;
        }

        .part_title {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            line-height: 80px;
            font-size: 24px;
            font-weight: 400;
            color: #2f353d;
            border-bottom: 1px solid #eee;
        }

        .part1_item {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 20px;
            padding: 0;
        }


        .input-groups li div {
            display: inline-block;
        }

        .input-groups {
            list-style: none;
            padding: 0;
        }

        .part1_item ul li {
            font: 16px/1.5 tahoma, arial, "\5b8b\4f53";
            font-family: tahoma, arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
            list-style: none;
            outline: 0;
            text-decoration: none;
            padding: 0 12px;
            margin-right: 20px;
            font-weight: 700;
            height: 100%;
            line-height: 46px;

            border: 1px solid #cfbfb1;
            width: 75px;
            display: inline-block;
        }

        .part1_item ul li a {
            margin: 0 20px;
            color: gray;
        }

        .part1_item ul {
            list-style: none;
            display: inline-block;
            padding-left: 0;
        }

        .input-title {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            display: inline-block;
            font-size: 20px;
            color: #5b5b5b;
            line-height: 58px;
            width: 120px;
        }

        .bar-right {
            height: 58px;
            width: 1000px;
            float: right;
        }

        .bar-right div select {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            text-transform: none;
            font-family: inherit;
            width: 11rem;
            border: 1px solid #d8dde1;
            height: 56px;
            line-height: 56px;
            padding-left: 10px;
            font-size: 15px;
            color: #576371;
            margin-right: 20px;
        }

        .input-item {
            margin: 20px 0;
        }

        .item-two input {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 653px;
            padding-left: 20px;
            overflow-y: hidden;
        }

        .item-two {
            margin-top: 20px;
            margin-left: 0;
        }

        .address {
        }

        .name {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .input-address {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 600px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .input-content {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 400px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .input-petType {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .store {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .phone {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 400px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .notice {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            font-size: 12px;
            margin: 0;
            padding: 30px;
            background: #f5f8fa;
            margin-bottom: 30px;
            height: 150px;
            box-sizing: border-box;
        }

        .notice-list {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .notice_tit {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            float: left;
            height: 100%;
            color: #0190e1;
            font-weight: 700;
            font-size: 18px;
            margin-right: 20px;
        }

        .notice ul {
            line-height: 1.5;
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            font-size: 16px;
            list-style: none;
        }

        .submit-btn {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            cursor: pointer;
            transition: color .2s ease;
            text-decoration: none;
            border: 0 none;
            outline: 0 none;
            display: inline-block;
            line-height: 40px;
            width: 124px;
            height: 40px;
            text-align: center;
            color: #fff;
            font-size: 15px;
            background: #0190e1;
        }

        .back-btn {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            cursor: pointer;
            transition: color .2s ease;
            text-decoration: none;
            border: 0 none;
            outline: 0 none;
            background: #a4a4a4;
            margin-right: 15px;
            display: inline-block;
            line-height: 40px;
            width: 124px;
            height: 40px;
            text-align: center;
            color: #fff;
            font-size: 15px;
        }

        .question-btns {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #2c3e50;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            font-size: 12px;
            margin: 0;
            padding: 0;
            background: #fbfbfb;
            height: 96px;
            line-height: 96px;
            text-align: center;
        }

        .time {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 200px;
            overflow-y: hidden;
            padding-left: 20px;
        }

        .details {
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            margin: 0;
            overflow: visible;
            font-family: inherit;
            border: 1px solid #d8dde1;
            height: 52px;
            line-height: 52px;
            font-size: 15px;
            color: #576371;
            display: inline-block;
            width: 600px;
            overflow-y: hidden;
            padding-left: 20px;


        }

        .layui-input-block {
            width:150px;
        }



        .layui-form-item {
            padding: 20px 0;
        }

    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $("#sb").click(function () {
            alert("预约成功");
        })
    </script>
</head>
<body>
<header class="header">
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">登录</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="row">
        <div class="col1">
            <ul class="left-list">
                <li class="left-list_item"><a href="/cat">猫专区</a></li>
                <li class="left-list_item"><a href="/dog">狗专区</a></li>
                <li class="left-list_item"><a>SPECIAL合作专区</a></li>
            </ul>
        </div>
        <div class="col2">
            <div class="part0">
                <div class="picture-frame"></div>
            </div>
            <form action="/appointing" method="post" class="layui-form">
                <div class="part1">
                    <div class="part_title">
                        <div>请选择预约类别</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">宠 物 : </label>
                        <div class="layui-input-block">
                            <select name="petType" lay-verify="required">
                                <option value=""></option>
                                <option value="猫">猫</option>
                                <option value="狗">狗</option>
                            </select>
                        </div>
                    </div>
                    <!--<div class="part1_item">
                        <span>服务内容：</span>
                        <label>
                            <input class="input-content" type="text" placeholder="服务内容" name="contentType">
                        </label>
                        &lt;!&ndash;<ul>
                            <li><a>铲屎</a></li>
                            <li><a>加饭</a></li>
                            <li><a>洗澡</a></li>
                        </ul>&ndash;&gt;
                    </div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">服务：</label>
                        <div class="layui-input-block1">
                            <input type="radio" name="contentType" value="洗浴" title="洗浴" checked>
                            <input type="radio" name="contentType" value="清洁" title="清洁">
                            <input type="radio" name="contentType" value="喂食" title="喂食">
                        </div>
                    </div>
                </div>
                <div class="part2" style="">
                    <div class="part_title">请填写个人信息</div>
                    <ul class="input-groups">
                        <li>
                            <div class="input-item">
                                <div class="address">
                                    <div class="input-title">*个人地址：</div>
                                    <div class="bar-right fl">
                                        <label>
                                            <input class="input-address" type="text" placeholder="地址" name="address">
                                        </label>
                                        <!--<div><select name="" style="margin-right: 20px;">
                                            <option disabled="disabled" value="default">请选择省</option>
                                            <option value="1000001">安徽省</option>
                                            <option value="1000002">北京市</option>
                                            <option value="1000003">福建省</option>
                                            <option value="1000004">甘肃省</option>
                                            <option value="1000005">广东省</option>
                                            <option value="1000006">广西壮族自治区</option>
                                            <option value="1000007">贵州省</option>
                                            <option value="1000008">海南省</option>
                                            <option value="1000009">河北省</option>
                                            <option value="1000010">河南省</option>
                                            <option value="1000011">黑龙江省</option>
                                            <option value="1000012">湖北省</option>
                                            <option value="1000013">湖南省</option>
                                            <option value="1000014">吉林省</option>
                                            <option value="1000015">江苏省</option>
                                            <option value="1000016">江西省</option>
                                            <option value="1000017">辽宁省</option>
                                            <option value="1000018">内蒙古自治区</option>
                                            <option value="1000019">宁夏回族自治区</option>
                                            <option value="1000032">其它</option>
                                            <option value="1000020">青海省</option>
                                            <option value="1000021">山东省</option>
                                            <option value="1000022">山西省</option>
                                            <option value="1000023">陕西省</option>
                                            <option value="1000024">上海市</option>
                                            <option value="1000025">四川省</option>
                                            <option value="1000026">天津市</option>
                                            <option value="1000027">西藏自治区</option>
                                            <option value="1000028">新疆维吾尔自治区</option>
                                            <option value="1000029">云南省</option>
                                            <option value="1000030">浙江省</option>
                                            <option value="1000031">重庆市</option>
                                        </select>
                                            <select name="" style="margin-right: 20px;">
                                                <option disabled="disabled" value="default">请选择市</option>
                                            </select><select name=""
                                                             style="margin-right: 20px;">
                                                <option disabled="disabled" value="default">请选择区</option>
                                            </select><select name="">
                                                <option disabled="disabled" value="default">请选择乡镇</option>
                                            </select>
                                        </div>
                                        <div class="item-two"><input type="text" placeholder="详细地址"
                                                                     regtype="ifVal"
                                                                     class="detail-addr"></div>-->
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="input-item">
                                <div class="input-title">*&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;店：</div>
                                <div class="bar-right fl">
                                    <div>
                                        <label>
                                            <input class="store" type="text" placeholder="门店" name="store">
                                        </label>
                                        <!--<select name="" style="margin-right: 20px;">
                                        <option disabled="disabled" value="default">请选择门店</option>
                                    </select>-->
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="input-item">
                                <div class="input-title">*您的姓名：</div>
                                <div class="bar-right fl">
                                    <div><label>
                                        <input class="name" type="text" name="name">
                                    </label></div>
                                </div>
                            </div>
                        </li>
                        <!--                    <li>
                                                <div class="input-item">
                                                    <div class="input-title">*手机：</div>
                                                    <div class="address-right fl">
                                                        <div><label>
                                                            <input class="phone" type="text">
                                                        </label></div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="input-item">
                                                    <div class="input-title">*个人地址：</div>
                                                    <div class="address-right fl">
                                                        <div><select name="" style="margin-right: 20px;">
                                                            <option disabled="disabled" value="default">请选择省</option>
                                                            <option value="1000001">安徽省</option>
                                                            <option value="1000002">北京市</option>
                                                            <option value="1000003">福建省</option>
                                                            <option value="1000004">甘肃省</option>
                                                            <option value="1000005">广东省</option>
                                                            <option value="1000006">广西壮族自治区</option>
                                                            <option value="1000007">贵州省</option>
                                                            <option value="1000008">海南省</option>
                                                            <option value="1000009">河北省</option>
                                                            <option value="1000010">河南省</option>
                                                            <option value="1000011">黑龙江省</option>
                                                            <option value="1000012">湖北省</option>
                                                            <option value="1000013">湖南省</option>
                                                            <option value="1000014">吉林省</option>
                                                            <option value="1000015">江苏省</option>
                                                            <option value="1000016">江西省</option>
                                                            <option value="1000017">辽宁省</option>
                                                            <option value="1000018">内蒙古自治区</option>
                                                            <option value="1000019">宁夏回族自治区</option>
                                                            <option value="1000032">其它</option>
                                                            <option value="1000020">青海省</option>
                                                            <option value="1000021">山东省</option>
                                                            <option value="1000022">山西省</option>
                                                            <option value="1000023">陕西省</option>
                                                            <option value="1000024">上海市</option>
                                                            <option value="1000025">四川省</option>
                                                            <option value="1000026">天津市</option>
                                                            <option value="1000027">西藏自治区</option>
                                                            <option value="1000028">新疆维吾尔自治区</option>
                                                            <option value="1000029">云南省</option>
                                                            <option value="1000030">浙江省</option>
                                                            <option value="1000031">重庆市</option>
                                                        </select><select name="" style="margin-right: 20px;">
                                                            <option disabled="disabled" value="default">请选择市</option>
                                                        </select><select name="" style="margin-right: 20px;">
                                                            <option disabled="disabled" value="default">请选择区</option>
                                                        </select><select name="">
                                                            <option disabled="disabled" value="default">请选择乡镇</option>
                                                        </select></div>
                                                        <div class="item-two" style="margin-left: 20px;"><input type="text" placeholder="详细地址"
                                                                                                                regtype="ifVal"
                                                                                                                class="detail-addr"></div>
                                                    </div>
                                                </div>
                                            </li>-->
                    </ul>
                    <div class="reservation-info">
                        <div class="part_title">请填写预约信息</div>
                        <ul class="input-groups">
                            <li>
                                <div class="input-item">
                                    <div class="input-title">*上门时间：</div>
                                    <div class="bar-right fl">
                                        <div><label>
                                            <input type="text" class="layui-input" id="test1" name="date">
                                        </label></div>
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="input-item">
                                    <div class="input-title">*服务要求：</div>
                                    <div class="bar-right fl">
                                        <div><label>
                                            <input class="details" type="text" name="demand">
                                        </label>

                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>

                        <div class="notice">
                            <div class="notice_tit fl">注意事项</div>
                            <div class="notice-list">
                                <ul>
                                    <li>
                                        ● 您的预约登记成功后，门店会及时处理您的预约单，并与您联系以确认上门时间，请确保您提供的电话保持畅通。
                                    </li>
                                    <li>
                                        ● 由于需要事先安排，目前门店只接受14天内的服务预约。
                                    </li>
                                    <li>
                                        ● 如您需要更改信息或期望上门日期，请提前联系上面显示的门店电话号码。
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="question-btns"><a href="javascript:" class="back-btn">重置</a>
                    <label>
                        <input id="sb" class="submit-btn" type="submit">
                    </label>
                </div>
            </form>
        </div>
    </div>


</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>
<script src="../static/layui/layui.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
            ,type: 'datetime'
        });
    });
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</html>